<template>
  <!-- 页面主容器 -->
  <div id="app-container">

    <!-- 水平菜单组件 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <!-- Logo 图片 -->
      <img :src="logoImage">

      <!-- 发布按钮 -->
      <el-menu-item index="1" @click="dialogVisible = true">发布</el-menu-item>

      <!-- 搜索框组件 -->
      <div class="SearchBox">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable
          class="input-with-select"
          @keyup.enter.native="query()"
        >
          <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
        </el-input>
      </div>
    </el-menu>

    <!-- 文章列表（使用 el-form 组件展示） -->
    <el-form v-for="(item, i) in contentList" :key="i" class="ArticleList">
      <!-- 文章列表项 -->
      <el-form-item class="ArticleListItem">
        <!-- 标题（使用 v-html 渲染富文本） -->
        <div style="font-size: large; font-weight: bold" v-html="item.title"></div>
        <!-- 内容（使用 v-html 渲染富文本） -->
        <div v-html="item.value"></div>
      </el-form-item>
    </el-form>

    <!-- 发布文章对话框 -->
    <el-dialog
      title="发布文章"
      :visible.sync="dialogVisible"
      width="50%"
      style="text-align: left"
      :before-close="handleClose"
      close-on-click-modal
    >
      <!-- 标题输入区域 -->
      <label-wrap>标题</label-wrap>
      <br><br>
      <el-input
        placeholder="请输入标题"
        type="text"
        v-model="addTitle"
        maxlength="100"
        show-word-limit
      ></el-input>
      <br>

      <!-- 文章内容输入区域 -->
      <br>
      <br>
      <label-wrap style="margin-bottom: 30px">文章内容</label-wrap>
      <br><br>
      <el-input
        placeholder="请输入内容"
        type="textarea"
        v-model="addContent"
        rows="8"
        maxlength="2000"
        show-word-limit
      ></el-input>

      <!-- 对话框底部操作区 -->
      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button @click="dialogVisible = false">取 消</el-button>

        <!-- 确定按钮 -->
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { fuzzySearch, searchAll, save } from '@/api/search'

export default {
  name: 'es',
  data() {
    return {
      // 搜索框输入内容
      input: '',
      // 当前激活的菜单项索引
      activeIndex: '1',
      // Logo 图片资源路径
      logoImage: require('@/assets/image/search/logo.png'),
      // 文章列表数据
      contentList: [],
      // 发布文章对话框是否显示
      dialogVisible: false,
      // 待发布的文章标题
      addTitle: '',
      // 待发布的文章内容
      addContent: ''
    }
  },
  methods: {

    /**
     * 保存文章
     *
     * 该方法用于处理发布文章对话框中的“确定”按钮点击事件。
     * 首先，将待发布的文章标题和内容封装到 `input` 对象中。
     * 接着，调用 `save()` API 将文章信息发送至服务器进行保存。
     * 成功保存后，关闭发布文章对话框（`dialogVisible = false`），并重新查询所有文章（`queryAll()`）以更新列表。
     * 若在保存过程中发生错误，将错误信息打印到控制台。
     */
    save() {
      const self = this

      // 封装待发布的文章信息
      let input = {
        title: self.addTitle,
        content: self.addContent
      }

      console.log(input)

      // 调用 save() API 保存文章
      save(input).then((response) => {
        // 保存成功，关闭发布文章对话框并重新查询所有文章
        self.dialogVisible = false
        self.queryAll()
      }).catch(function(error) {
        // 保存失败，打印错误信息到控制台
        console.log(error)
      })
    },

    // 对话框关闭前的处理函数
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },

    // 处理菜单项选中事件
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    /**
     * 处理搜索框回车键事件
     *
     * 当用户在搜索框中输入内容并按下回车键时，该方法会被触发。
     * 首先检查输入内容是否为空字符串。若为空，则调用 `queryAll()` 方法查询所有文章并返回。
     * 若输入内容非空，则清空当前 `contentList`，创建一个包含搜索关键词的对象 `input`，
     * 并调用 `fuzzySearch()` API 进行模糊搜索。搜索结果将更新至 `contentList` 中。
     * 若在搜索过程中发生错误，将错误信息打印到控制台。
     */
    query() {
      const self = this

      // 检查输入内容是否为空字符串
      if (self.input.toString() === '') {
        // 输入为空，调用 queryAll() 查询所有文章
        self.queryAll()
        return
      }

      // 清空当前 contentList
      self.contentList = []

      // 创建包含搜索关键词的对象
      let input = { keyword: self.input }

      // 调用 fuzzySearch() API 进行模糊搜索
      fuzzySearch(input).then((response) => {
        console.log(response)

        // 提取响应中的数据数组
        let data = response.data

        // 遍历数据数组，将每篇文章的标题和内容封装为对象并推入 contentList
        data.forEach(function(e) {
          self.contentList.push({
            title: e.title,
            value: e.content
          })
        })
      }).catch(function(error) {
        // 若搜索过程中发生错误，打印错误信息到控制台
        console.log(error)
      })

    },

    /**
     * 查询所有文章信息
     *
     * 该方法通过调用 `searchAll()` API 获取文章数据，并将结果更新到 `contentList` 属性中。
     * 在成功获取数据时，遍历响应中的数据数组，将每篇文章的标题和内容封装为对象后推入 `contentList`。
     * 若在查询过程中发生错误，则将错误信息打印到控制台。
     */
    queryAll() {
      const self = this
      self.contentList = []

      // 调用 searchAll() API 查询所有文章信息
      searchAll().then((response) => {
        console.log(response)

        // 提取响应中的数据数组
        let data = response.data
        console.log(data)

        // 遍历数据数组，将每篇文章的标题和内容封装为对象并推入 contentList
        data.forEach(function(e) {
          self.contentList.push({
            title: e.title,
            value: e.content
          })
        })

      }).catch(function(error) {
        // 若查询过程中发生错误，打印错误信息到控制台
        console.log(error.assign)
      })
    },

    created: function() {
      this.queryAll()
    }

  }
}
</script>

<style scoped>

/* Logo 图像样式 */
img {
  display: block;
  width: 160px;
  min-width: 96px;
  height: 60px;
  margin-top: calc((48px - 44px) / 2);
  float: left;
  padding-left: 20px;
  padding-right: 20px;
}

/* 搜索框容器样式 */
.SearchBox {
  float: left;
  width: 550px;
  height: 60px;
  padding-top: 10px;
  padding-left: 200px;
}

/* 文章列表容器样式 */
.ArticleList {
  text-align: left;
  padding-left: 50px;
  padding-right: 30px;
  padding-top: 30px;
  width: 70%;
}

/* 文章列表项样式 */
.ArticleListItem {
  border-bottom: 1px solid #bfb5b5;
}

</style>
